<script lang="ts" setup>
  const props = defineProps({
    fireColor: { required: false, type: String, default: '#06be0c' }, // #fc7302
    fireSize: { require: false, type: Number, default: 100 }
  })
</script>

<template>
  <div class="z-candle">
    <div class="candle-body"></div>
    <div class="candle-fire">
      <div class="fire-box">
        <div class="fire-flame" v-for="item in props.fireSize" :key="item" :style="{'background': props.fireColor}"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .z-candle {
    position: relative;
    .candle-body {
      position: relative; width: 100px; height: 300px;
      background: linear-gradient(180deg, #fff, #9e9e9e 50%, rgb(18,18,18) 95%);
      z-index: 1;
      &::before {
        position: absolute;
        content: "";
        width: 100px;
        height: 28px;
        border-radius: 50%;
        box-sizing: border-box;
        top: -14px;
        background: radial-gradient(#fff, #9e9e9e 45%, #9e9e9e 100%);
      }
      &::after {
        position: absolute;
        content: "";
        width: 4px;
        height: 48px;
        background: #fff;
        left: 50%;
        top: -22px;
        transform: translate(-50%, -50%);
        border-radius: 50% 50% 0 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 60%, #fff);
        opacity: .7;
        filter: blur(1px);
      }
    }
    .candle-fire {
      position: absolute;
      top: -200px; left: 50%; width: 80px; height: 200px;
      transform: translate(-50%, -50%);
      filter: blur(2px);
      
      .fire-box {
        position: absolute;
        top: 30px;
        left: 50%;
        border-radius: 45%;
        box-sizing: border-box;
        border: 120px solid transparent;
        border-bottom: 120px solid transparent;
        transform: translate(-50%, 0) scaleX(0.45);
        background-color: transparent;
      }

      .fire-flame {
        position: absolute;
        top: 60px;
        transform: translate(0, 0);
        // background: #06be0c;
        // background: #fc7302;
        border-radius: 50%;
        z-index: -1;
        mix-blend-mode: screen;
        &:nth-child(1) {
          width: 5px;
          height: 5px;
          left: calc(17px - 55px);
        }
      }
    }
  }

  @keyframes movetop {
    0% { transform: translate(0, 0); }
    20% { transform: translate(0, 0); }
    87% { transform: translate(0, -170px); opacity: 0; }
    100% { transform: translate(0, -170px); opacity: 0; }
  }

  .fire-flame:nth-child(0) { width: 41px; height: 41px; left: calc(48px - 55px); }
  .fire-flame:nth-child(0) { -webkit-animation: movetop 1s linear -1.445s infinite; animation: movetop 1s linear -1.445s infinite; }

  .fire-flame:nth-child(1) { width: 5px; height: 5px; left: calc(17px - 55px); }
  .fire-flame:nth-child(1) { -webkit-animation: movetop 1s linear -2.679s infinite; animation: movetop 1s linear -2.679s infinite; }

  .fire-flame:nth-child(2) { width: 17px; height: 17px; left: calc(5px - 55px); }
  .fire-flame:nth-child(2) { -webkit-animation: movetop 1s linear -1.573s infinite; animation: movetop 1s linear -1.573s infinite; }

  .fire-flame:nth-child(3) { width: 3px; height: 3px; left: calc(59px - 55px); }
  .fire-flame:nth-child(3) { -webkit-animation: movetop 1s linear -1.378s infinite; animation: movetop 1s linear -1.378s infinite; }

  .fire-flame:nth-child(4) { width: 36px; height: 36px; left: calc(53px - 55px); }
  .fire-flame:nth-child(4) { -webkit-animation: movetop 1s linear -0.907s infinite; animation: movetop 1s linear -0.907s infinite; }

  .fire-flame:nth-child(5) { width: 31px; height: 31px; left: calc(61px - 55px); }
  .fire-flame:nth-child(5) { -webkit-animation: movetop 1s linear -1.155s infinite; animation: movetop 1s linear -1.155s infinite; }

  .fire-flame:nth-child(6) { width: 4px; height: 4px; left: calc(44px - 55px); }
  .fire-flame:nth-child(6) { -webkit-animation: movetop 1s linear -1.856s infinite; animation: movetop 1s linear -1.856s infinite; }

  .fire-flame:nth-child(7) { width: 12px; height: 12px; left: calc(26px - 55px); }
  .fire-flame:nth-child(7) { -webkit-animation: movetop 1s linear -2.128s infinite; animation: movetop 1s linear -2.128s infinite; }

  .fire-flame:nth-child(8) { width: 38px; height: 38px; left: calc(25px - 55px); }
  .fire-flame:nth-child(8) { -webkit-animation: movetop 1s linear -2.896s infinite; animation: movetop 1s linear -2.896s infinite; }

  .fire-flame:nth-child(9) { width: 33px; height: 33px; left: calc(36px - 55px); }
  .fire-flame:nth-child(9) { -webkit-animation: movetop 1s linear -1.02s infinite; animation: movetop 1s linear -1.02s infinite; }

  .fire-flame:nth-child(10) { width: 15px; height: 15px; left: calc(57px - 55px); }
  .fire-flame:nth-child(10) { -webkit-animation: movetop 1s linear -2.975s infinite; animation: movetop 1s linear -2.975s infinite; }

  .fire-flame:nth-child(11) { width: 43px; height: 43px; left: calc(16px - 55px); }
  .fire-flame:nth-child(11) { -webkit-animation: movetop 1s linear -0.913s infinite; animation: movetop 1s linear -0.913s infinite; }

  .fire-flame:nth-child(12) { width: 30px; height: 30px; left: calc(64px - 55px); }
  .fire-flame:nth-child(12) { -webkit-animation: movetop 1s linear -1.622s infinite; animation: movetop 1s linear -1.622s infinite; }

  .fire-flame:nth-child(13) { width: 40px; height: 40px; left: calc(68px - 55px); }
  .fire-flame:nth-child(13) { -webkit-animation: movetop 1s linear -0.928s infinite; animation: movetop 1s linear -0.928s infinite; }

  .fire-flame:nth-child(14) { width: 25px; height: 25px; left: calc(39px - 55px); }
  .fire-flame:nth-child(14) { -webkit-animation: movetop 1s linear -0.433s infinite; animation: movetop 1s linear -0.433s infinite; }

  .fire-flame:nth-child(15) { width: 11px; height: 11px; left: calc(66px - 55px); }
  .fire-flame:nth-child(15) { -webkit-animation: movetop 1s linear -0.349s infinite; animation: movetop 1s linear -0.349s infinite; }

  .fire-flame:nth-child(16) { width: 16px; height: 16px; left: calc(20px - 55px); }
  .fire-flame:nth-child(16) { -webkit-animation: movetop 1s linear -1.276s infinite; animation: movetop 1s linear -1.276s infinite; }

  .fire-flame:nth-child(17) { width: 29px; height: 29px; left: calc(38px - 55px); }
  .fire-flame:nth-child(17) { -webkit-animation: movetop 1s linear -0.703s infinite; animation: movetop 1s linear -0.703s infinite; }

  .fire-flame:nth-child(18) { width: 47px; height: 47px; left: calc(70px - 55px); }
  .fire-flame:nth-child(18) { -webkit-animation: movetop 1s linear -1.492s infinite; animation: movetop 1s linear -1.492s infinite; }

  .fire-flame:nth-child(19) { width: 46px; height: 46px; left: calc(49px - 55px); }
  .fire-flame:nth-child(19) { -webkit-animation: movetop 1s linear -2.221s infinite; animation: movetop 1s linear -2.221s infinite; }

  .fire-flame:nth-child(20) { width: 22px; height: 22px; left: calc(17px - 55px); }
  .fire-flame:nth-child(20) { -webkit-animation: movetop 1s linear -2.34s infinite; animation: movetop 1s linear -2.34s infinite; }

  .fire-flame:nth-child(21) { width: 12px; height: 12px; left: calc(14px - 55px); }
  .fire-flame:nth-child(21) { -webkit-animation: movetop 1s linear -1.463s infinite; animation: movetop 1s linear -1.463s infinite; }

  .fire-flame:nth-child(22) { width: 40px; height: 40px; left: calc(30px - 55px); }
  .fire-flame:nth-child(22) { -webkit-animation: movetop 1s linear -1.855s infinite; animation: movetop 1s linear -1.855s infinite; }

  .fire-flame:nth-child(23) { width: 35px; height: 35px; left: calc(16px - 55px); }
  .fire-flame:nth-child(23) { -webkit-animation: movetop 1s linear -2.413s infinite; animation: movetop 1s linear -2.413s infinite; }

  .fire-flame:nth-child(24) { width: 37px; height: 37px; left: calc(8px - 55px); }
  .fire-flame:nth-child(24) { -webkit-animation: movetop 1s linear -0.952s infinite; animation: movetop 1s linear -0.952s infinite; }

  .fire-flame:nth-child(25) { width: 3px; height: 3px; left: calc(55px - 55px); }
  .fire-flame:nth-child(25) { -webkit-animation: movetop 1s linear -1.083s infinite; animation: movetop 1s linear -1.083s infinite; }

  .fire-flame:nth-child(26) { width: 39px; height: 39px; left: calc(3px - 55px); }
  .fire-flame:nth-child(26) { -webkit-animation: movetop 1s linear -0.157s infinite; animation: movetop 1s linear -0.157s infinite; }

  .fire-flame:nth-child(27) { width: 48px; height: 48px; left: calc(13px - 55px); }
  .fire-flame:nth-child(27) { -webkit-animation: movetop 1s linear -2.893s infinite; animation: movetop 1s linear -2.893s infinite; }

  .fire-flame:nth-child(28) { width: 22px; height: 22px; left: calc(10px - 55px); }
  .fire-flame:nth-child(28) { -webkit-animation: movetop 1s linear -1.192s infinite; animation: movetop 1s linear -1.192s infinite; }

  .fire-flame:nth-child(29) { width: 14px; height: 14px; left: calc(27px - 55px); }
  .fire-flame:nth-child(29) { -webkit-animation: movetop 1s linear -2.382s infinite; animation: movetop 1s linear -2.382s infinite; }

  .fire-flame:nth-child(30) { width: 3px; height: 3px; left: calc(28px - 55px); }
  .fire-flame:nth-child(30) { -webkit-animation: movetop 1s linear -2.839s infinite; animation: movetop 1s linear -2.839s infinite; }

  .fire-flame:nth-child(31) { width: 29px; height: 29px; left: calc(29px - 55px); }
  .fire-flame:nth-child(31) { -webkit-animation: movetop 1s linear -1.377s infinite; animation: movetop 1s linear -1.377s infinite; }

  .fire-flame:nth-child(32) { width: 37px; height: 37px; left: calc(34px - 55px); }
  .fire-flame:nth-child(32) { -webkit-animation: movetop 1s linear -1.006s infinite; animation: movetop 1s linear -1.006s infinite; }

  .fire-flame:nth-child(33) { width: 48px; height: 48px; left: calc(64px - 55px); }
  .fire-flame:nth-child(33) { -webkit-animation: movetop 1s linear -1.576s infinite; animation: movetop 1s linear -1.576s infinite; }

  .fire-flame:nth-child(34) { width: 26px; height: 26px; left: calc(39px - 55px); }
  .fire-flame:nth-child(34) { -webkit-animation: movetop 1s linear -2.538s infinite; animation: movetop 1s linear -2.538s infinite; }

  .fire-flame:nth-child(35) { width: 34px; height: 34px; left: calc(7px - 55px); }
  .fire-flame:nth-child(35) { -webkit-animation: movetop 1s linear -2.532s infinite; animation: movetop 1s linear -2.532s infinite; }

  .fire-flame:nth-child(36) { width: 29px; height: 29px; left: calc(64px - 55px); }
  .fire-flame:nth-child(36) { -webkit-animation: movetop 1s linear -0.032s infinite; animation: movetop 1s linear -0.032s infinite; }

  .fire-flame:nth-child(37) { width: 14px; height: 14px; left: calc(55px - 55px); }
  .fire-flame:nth-child(37) { -webkit-animation: movetop 1s linear -0.123s infinite; animation: movetop 1s linear -0.123s infinite; }

  .fire-flame:nth-child(38) { width: 20px; height: 20px; left: calc(16px - 55px); }
  .fire-flame:nth-child(38) { -webkit-animation: movetop 1s linear -1.149s infinite; animation: movetop 1s linear -1.149s infinite; }

  .fire-flame:nth-child(39) { width: 25px; height: 25px; left: calc(4px - 55px); }
  .fire-flame:nth-child(39) { -webkit-animation: movetop 1s linear -1.226s infinite; animation: movetop 1s linear -1.226s infinite; }

  .fire-flame:nth-child(40) { width: 9px; height: 9px; left: calc(59px - 55px); }
  .fire-flame:nth-child(40) { -webkit-animation: movetop 1s linear -0.185s infinite; animation: movetop 1s linear -0.185s infinite; }

  .fire-flame:nth-child(41) { width: 12px; height: 12px; left: calc(8px - 55px); }
  .fire-flame:nth-child(41) { -webkit-animation: movetop 1s linear -2.965s infinite; animation: movetop 1s linear -2.965s infinite; }

  .fire-flame:nth-child(42) { width: 12px; height: 12px; left: calc(61px - 55px); }
  .fire-flame:nth-child(42) { -webkit-animation: movetop 1s linear -0.005s infinite; animation: movetop 1s linear -0.005s infinite; }

  .fire-flame:nth-child(43) { width: 26px; height: 26px; left: calc(62px - 55px); }
  .fire-flame:nth-child(43) { -webkit-animation: movetop 1s linear -1.879s infinite; animation: movetop 1s linear -1.879s infinite; }

  .fire-flame:nth-child(44) { width: 22px; height: 22px; left: calc(65px - 55px); }
  .fire-flame:nth-child(44) { -webkit-animation: movetop 1s linear -0.824s infinite; animation: movetop 1s linear -0.824s infinite; }

  .fire-flame:nth-child(45) { width: 2px; height: 2px; left: calc(23px - 55px); }
  .fire-flame:nth-child(45) { -webkit-animation: movetop 1s linear -0.309s infinite; animation: movetop 1s linear -0.309s infinite; }

  .fire-flame:nth-child(46) { width: 41px; height: 41px; left: calc(27px - 55px); }
  .fire-flame:nth-child(46) { -webkit-animation: movetop 1s linear -0.8s infinite; animation: movetop 1s linear -0.8s infinite; }

  .fire-flame:nth-child(47) { width: 6px; height: 6px; left: calc(70px - 55px); }
  .fire-flame:nth-child(47) { -webkit-animation: movetop 1s linear -1.189s infinite; animation: movetop 1s linear -1.189s infinite; }

  .fire-flame:nth-child(48) { width: 31px; height: 31px; left: calc(14px - 55px); }
  .fire-flame:nth-child(48) { -webkit-animation: movetop 1s linear -2.05s infinite; animation: movetop 1s linear -2.05s infinite; }

  .fire-flame:nth-child(49) { width: 25px; height: 25px; left: calc(26px - 55px); }
  .fire-flame:nth-child(49) { -webkit-animation: movetop 1s linear -2.943s infinite; animation: movetop 1s linear -2.943s infinite; }

  .fire-flame:nth-child(50) { width: 38px; height: 38px; left: calc(58px - 55px); }
  .fire-flame:nth-child(50) { -webkit-animation: movetop 1s linear -0.076s infinite; animation: movetop 1s linear -0.076s infinite; }

  .fire-flame:nth-child(51) { width: 32px; height: 32px; left: calc(53px - 55px); }
  .fire-flame:nth-child(51) { -webkit-animation: movetop 1s linear -2.659s infinite; animation: movetop 1s linear -2.659s infinite; }

  .fire-flame:nth-child(52) { width: 42px; height: 42px; left: calc(33px - 55px); }
  .fire-flame:nth-child(52) { -webkit-animation: movetop 1s linear -2.278s infinite; animation: movetop 1s linear -2.278s infinite; }

  .fire-flame:nth-child(53) { width: 39px; height: 39px; left: calc(7px - 55px); }
  .fire-flame:nth-child(53) { -webkit-animation: movetop 1s linear -0.505s infinite; animation: movetop 1s linear -0.505s infinite; }

  .fire-flame:nth-child(54) { width: 4px; height: 4px; left: calc(42px - 55px); }
  .fire-flame:nth-child(54) { -webkit-animation: movetop 1s linear -2.653s infinite; animation: movetop 1s linear -2.653s infinite; }

  .fire-flame:nth-child(55) { width: 26px; height: 26px; left: calc(57px - 55px); }
  .fire-flame:nth-child(55) { -webkit-animation: movetop 1s linear -2.814s infinite; animation: movetop 1s linear -2.814s infinite; }

  .fire-flame:nth-child(56) { width: 50px; height: 50px; left: calc(55px - 55px); }
  .fire-flame:nth-child(56) { -webkit-animation: movetop 1s linear -1.668s infinite; animation: movetop 1s linear -1.668s infinite; }

  .fire-flame:nth-child(57) { width: 39px; height: 39px; left: calc(11px - 55px); }
  .fire-flame:nth-child(57) { -webkit-animation: movetop 1s linear -1.008s infinite; animation: movetop 1s linear -1.008s infinite; }

  .fire-flame:nth-child(58) { width: 39px; height: 39px; left: calc(31px - 55px); }
  .fire-flame:nth-child(58) { -webkit-animation: movetop 1s linear -1.755s infinite; animation: movetop 1s linear -1.755s infinite; }

  .fire-flame:nth-child(59) { width: 35px; height: 35px; left: calc(50px - 55px); }
  .fire-flame:nth-child(59) { -webkit-animation: movetop 1s linear -2.661s infinite; animation: movetop 1s linear -2.661s infinite; }

  .fire-flame:nth-child(60) { width: 32px; height: 32px; left: calc(49px - 55px); }
  .fire-flame:nth-child(60) { -webkit-animation: movetop 1s linear -1.297s infinite; animation: movetop 1s linear -1.297s infinite; }

  .fire-flame:nth-child(61) { width: 24px; height: 24px; left: calc(31px - 55px); }
  .fire-flame:nth-child(61) { -webkit-animation: movetop 1s linear -0.951s infinite; animation: movetop 1s linear -0.951s infinite; }

  .fire-flame:nth-child(62) { width: 46px; height: 46px; left: calc(47px - 55px); }
  .fire-flame:nth-child(62) { -webkit-animation: movetop 1s linear -0.632s infinite; animation: movetop 1s linear -0.632s infinite; }

  .fire-flame:nth-child(63) { width: 40px; height: 40px; left: calc(56px - 55px); }
  .fire-flame:nth-child(63) { -webkit-animation: movetop 1s linear -2.302s infinite; animation: movetop 1s linear -2.302s infinite; }

  .fire-flame:nth-child(64) { width: 18px; height: 18px; left: calc(3px - 55px); }
  .fire-flame:nth-child(64) { -webkit-animation: movetop 1s linear -1.456s infinite; animation: movetop 1s linear -1.456s infinite; }

  .fire-flame:nth-child(65) { width: 38px; height: 38px; left: calc(26px - 55px); }
  .fire-flame:nth-child(65) { -webkit-animation: movetop 1s linear -2.332s infinite; animation: movetop 1s linear -2.332s infinite; }

  .fire-flame:nth-child(66) { width: 5px; height: 5px; left: calc(24px - 55px); }
  .fire-flame:nth-child(66) { -webkit-animation: movetop 1s linear -1.343s infinite; animation: movetop 1s linear -1.343s infinite; }

  .fire-flame:nth-child(67) { width: 47px; height: 47px; left: calc(68px - 55px); }
  .fire-flame:nth-child(67) { -webkit-animation: movetop 1s linear -0.574s infinite; animation: movetop 1s linear -0.574s infinite; }

  .fire-flame:nth-child(68) { width: 5px; height: 5px; left: calc(14px - 55px); }
  .fire-flame:nth-child(68) { -webkit-animation: movetop 1s linear -2.829s infinite; animation: movetop 1s linear -2.829s infinite; }

  .fire-flame:nth-child(69) { width: 36px; height: 36px; left: calc(8px - 55px); }
  .fire-flame:nth-child(69) { -webkit-animation: movetop 1s linear -0.685s infinite; animation: movetop 1s linear -0.685s infinite; }

  .fire-flame:nth-child(70) { width: 26px; height: 26px; left: calc(48px - 55px); }
  .fire-flame:nth-child(70) { -webkit-animation: movetop 1s linear -1.862s infinite; animation: movetop 1s linear -1.862s infinite; }

  .fire-flame:nth-child(71) { width: 26px; height: 26px; left: calc(11px - 55px); }
  .fire-flame:nth-child(71) { -webkit-animation: movetop 1s linear -1.689s infinite; animation: movetop 1s linear -1.689s infinite; }

  .fire-flame:nth-child(72) { width: 22px; height: 22px; left: calc(36px - 55px); }
  .fire-flame:nth-child(72) { -webkit-animation: movetop 1s linear -0.992s infinite; animation: movetop 1s linear -0.992s infinite; }

  .fire-flame:nth-child(73) { width: 28px; height: 28px; left: calc(37px - 55px); }
  .fire-flame:nth-child(73) { -webkit-animation: movetop 1s linear -0.816s infinite; animation: movetop 1s linear -0.816s infinite; }

  .fire-flame:nth-child(74) { width: 40px; height: 40px; left: calc(9px - 55px); }
  .fire-flame:nth-child(74) { -webkit-animation: movetop 1s linear -0.652s infinite; animation: movetop 1s linear -0.652s infinite; }

  .fire-flame:nth-child(75) { width: 35px; height: 35px; left: calc(46px - 55px); }
  .fire-flame:nth-child(75) { -webkit-animation: movetop 1s linear -1.433s infinite; animation: movetop 1s linear -1.433s infinite; }

  .fire-flame:nth-child(76) { width: 17px; height: 17px; left: calc(51px - 55px); }
  .fire-flame:nth-child(76) { -webkit-animation: movetop 1s linear -0.995s infinite; animation: movetop 1s linear -0.995s infinite; }

  .fire-flame:nth-child(77) { width: 3px; height: 3px; left: calc(50px - 55px); }
  .fire-flame:nth-child(77) { -webkit-animation: movetop 1s linear -1.549s infinite; animation: movetop 1s linear -1.549s infinite; }

  .fire-flame:nth-child(78) { width: 26px; height: 26px; left: calc(43px - 55px); }
  .fire-flame:nth-child(78) { -webkit-animation: movetop 1s linear -1.425s infinite; animation: movetop 1s linear -1.425s infinite; }

  .fire-flame:nth-child(79) { width: 18px; height: 18px; left: calc(26px - 55px); }
  .fire-flame:nth-child(79) { -webkit-animation: movetop 1s linear -2.772s infinite; animation: movetop 1s linear -2.772s infinite; }

  .fire-flame:nth-child(80) { width: 23px; height: 23px; left: calc(27px - 55px); }
  .fire-flame:nth-child(80) { -webkit-animation: movetop 1s linear -0.851s infinite; animation: movetop 1s linear -0.851s infinite; }

  .fire-flame:nth-child(81) { width: 35px; height: 35px; left: calc(50px - 55px); }
  .fire-flame:nth-child(81) { -webkit-animation: movetop 1s linear -1.9s infinite; animation: movetop 1s linear -1.9s infinite; }

  .fire-flame:nth-child(82) { width: 11px; height: 11px; left: calc(48px - 55px); }
  .fire-flame:nth-child(82) { -webkit-animation: movetop 1s linear -1.378s infinite; animation: movetop 1s linear -1.378s infinite; }

  .fire-flame:nth-child(83) { width: 46px; height: 46px; left: calc(24px - 55px); }
  .fire-flame:nth-child(83) { -webkit-animation: movetop 1s linear -1.416s infinite; animation: movetop 1s linear -1.416s infinite; }

  .fire-flame:nth-child(84) { width: 34px; height: 34px; left: calc(50px - 55px); }
  .fire-flame:nth-child(84) { -webkit-animation: movetop 1s linear -2.298s infinite; animation: movetop 1s linear -2.298s infinite; }

  .fire-flame:nth-child(85) { width: 36px; height: 36px; left: calc(43px - 55px); }
  .fire-flame:nth-child(85) { -webkit-animation: movetop 1s linear -1.657s infinite; animation: movetop 1s linear -1.657s infinite; }

  .fire-flame:nth-child(86) { width: 41px; height: 41px; left: calc(8px - 55px); }
  .fire-flame:nth-child(86) { -webkit-animation: movetop 1s linear -1.661s infinite; animation: movetop 1s linear -1.661s infinite; }

  .fire-flame:nth-child(87) { width: 17px; height: 17px; left: calc(16px - 55px); }
  .fire-flame:nth-child(87) { -webkit-animation: movetop 1s linear -0.433s infinite; animation: movetop 1s linear -0.433s infinite; }

  .fire-flame:nth-child(88) { width: 7px; height: 7px; left: calc(34px - 55px); }
  .fire-flame:nth-child(88) { -webkit-animation: movetop 1s linear -1.049s infinite; animation: movetop 1s linear -1.049s infinite; }

  .fire-flame:nth-child(89) { width: 13px; height: 13px; left: calc(60px - 55px); }
  .fire-flame:nth-child(89) { -webkit-animation: movetop 1s linear -1.25s infinite; animation: movetop 1s linear -1.25s infinite; }

  .fire-flame:nth-child(90) { width: 35px; height: 35px; left: calc(16px - 55px); }
  .fire-flame:nth-child(90) { -webkit-animation: movetop 1s linear -0.09s infinite; animation: movetop 1s linear -0.09s infinite; }

  .fire-flame:nth-child(91) { width: 45px; height: 45px; left: calc(21px - 55px); }
  .fire-flame:nth-child(91) { -webkit-animation: movetop 1s linear -1.12s infinite; animation: movetop 1s linear -1.12s infinite; }

  .fire-flame:nth-child(92) { width: 36px; height: 36px; left: calc(69px - 55px); }
  .fire-flame:nth-child(92) { -webkit-animation: movetop 1s linear -2.636s infinite; animation: movetop 1s linear -2.636s infinite; }

  .fire-flame:nth-child(93) { width: 7px; height: 7px; left: calc(36px - 55px); }
  .fire-flame:nth-child(93) { -webkit-animation: movetop 1s linear -2.917s infinite; animation: movetop 1s linear -2.917s infinite; }

  .fire-flame:nth-child(94) { width: 36px; height: 36px; left: calc(1px - 55px); }
  .fire-flame:nth-child(94) { -webkit-animation: movetop 1s linear -1.142s infinite; animation: movetop 1s linear -1.142s infinite; }

  .fire-flame:nth-child(95) { width: 14px; height: 14px; left: calc(24px - 55px); }
  .fire-flame:nth-child(95) { -webkit-animation: movetop 1s linear -0.582s infinite; animation: movetop 1s linear -0.582s infinite; }

  .fire-flame:nth-child(96) { width: 37px; height: 37px; left: calc(22px - 55px); }
  .fire-flame:nth-child(96) { -webkit-animation: movetop 1s linear -2.721s infinite; animation: movetop 1s linear -2.721s infinite; }

  .fire-flame:nth-child(97) { width: 35px; height: 35px; left: calc(33px - 55px); }
  .fire-flame:nth-child(97) { -webkit-animation: movetop 1s linear -1.871s infinite; animation: movetop 1s linear -1.871s infinite; }

  .fire-flame:nth-child(98) { width: 7px; height: 7px; left: calc(35px - 55px); }
  .fire-flame:nth-child(98) { -webkit-animation: movetop 1s linear -2.136s infinite; animation: movetop 1s linear -2.136s infinite; }

  .fire-flame:nth-child(99) { width: 25px; height: 25px; left: calc(32px - 55px); }
  .fire-flame:nth-child(99) { -webkit-animation: movetop 1s linear -1.795s infinite; animation: movetop 1s linear -1.795s infinite; }

  .fire-flame:nth-child(100) { width: 35px; height: 35px; left: calc(27px - 55px); }
  .fire-flame:nth-child(100) { -webkit-animation: movetop 1s linear -0.333s infinite; animation: movetop 1s linear -0.333s infinite; }
</style>